<template>
	<div class="container" ref="container">
		<div class="pdf" ref="pdf" :style="pdfStyle">
			<img src="https://huishi-big-event.oss-cn-beijing.aliyuncs.com/PixPin_2024-07-17_10-29-25.png"
				style="height: 100%; width: 100%;" mode="widthFix" @load="onImageLoad">
		</div>

		<!-- 签字版 -->
		<sign :isSave="isSave" class="sign-container" v-if="showSign" @imgUrl="getImgUrl"></sign>

		<!-- 按钮 -->
		<div v-if="showBut">
			<button class="anniu" @click="toggleSign">{{anniu}}</button>
		</div>
	</div>
</template>

<script>
	import sign from '@/pages/index/index'

	export default {
		components: {
			sign
		},
		data() {
			return {
				img: '',
				showBut: false,
				showSign: false,
				anniu: '开始签署',
				scrollPosition: 0,
				isScrollDisabled: false,
				isSave: false,
				simg: ''
			}
		},
		computed: {
			pdfStyle() {
				return {
					height: '100%',
					overflowY: this.isScrollDisabled ? 'hidden' : 'auto',
					position: this.isScrollDisabled ? 'fixed' : 'static',
					top: this.isScrollDisabled ? `-${this.scrollPosition}px` : '0',
					width: '100%'
				}
			}
		},
		mounted() {
			this.getimg()
		},
		methods: {
			getImgUrl(msg) {
				this.simg = msg
				console.log('父组件接收到的图片URL：', this.simg);
			},
			async getimg() {
				await uni.request({
					// url: 'https://huaqing.xgxtravel.com/api/pdf/longimage/100', //仅为示例，并非真实接口地址。
					method: 'GET',
					data: {

					},

					success: (res) => {
						this.img = `data:image/png;base64,${res.data}`;
						console.log(this.img);
					}
				});
			},
			onImageLoad() {
				this.showBut = true
			},
			getScrollTop() {
				return this.$refs.pdf ? this.$refs.pdf.scrollTop : 0
			},
			setScrollTop(value) {
				if (this.$refs.pdf) {
					this.$refs.pdf.scrollTop = value
				}
			},
			toggleSign() {
				if (!this.showSign) {
					// 开始签署
					this.scrollPosition = this.getScrollTop()
					this.isScrollDisabled = true
					this.showSign = true
					this.anniu = '确认签署'
				} else {
					// 确认签署
					console.log('签署完成')
					this.isScrollDisabled = false
					this.anniu = '开始签署'
					this.isSave = true
					
					//setTimeout并不合适，要优化
					setTimeout(() => {
						this.showSign = false
					}, "100");
					this.$nextTick(() => {
						this.setScrollTop(this.scrollPosition)
					})
				}
			}
		}
	}
</script>

<style>
	.container {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.pdf {
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}

	.sign-container {
		position: fixed;
		bottom: calc(8% + 20px + 38px);
		left: 50%;
		width: 98%;
		z-index: 999;
		transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
		transform: translateX(-50%);
	}

	.anniu {
		position: fixed;
		bottom: 8%;
		left: 50%;
		transform: translateX(-50%);
		width: 250px;
		color: white;
		background-color: dodgerblue;
		padding: 10px 5px;
		border: none;
		border-radius: 7px;
		text-align: center;
		z-index: 1000;
	}
</style>